<template>
     <ContentWrapForm  >
    <HeaderTitle title="经济损失模型管理" content="设置经济损失模型参数" :isdivider="false" />
  </ContentWrapForm>
        <el-form ref="formRef" label-position="top" class="-mb-15px" v-loading="formLoading" :inline="true" :model="formData"
            :rules="formRules" label-width="auto">
                <el-row>
                    <el-col :span="24" class="flex" >
                    <ContentWrapForm  :title="'模型系数设置'" 
                    :style-params="{
                        backgroundColor: '#fff!important',
                        padding:'20px',
                        borderRadius:'8px!important',
                        width: '100%'
                    }"
                    >
                        <el-form-item>
                        </el-form-item>
                       <div class="flex">

                      
                        <el-form-item label="调整系数" prop="adjustRatio">
                            <el-input maxlength="20"
                            :formatter="(value) => `${value}`.replace(/\D/g,'')"
                            :parser="(value) => value.replace(/\D/g,'')"
                            v-model="formData.adjustRatio" controls-position="right" class="!w-300px" />
                        </el-form-item>
                        
                            <el-form-item label="生命线与建筑物结构经济损失的系数" prop="lifeRatio" label-width="270px">
                                <el-input maxlength="20"
                                :formatter="(value) => `${value}`.replace(/\D/g,'')"
                                :parser="(value) => value.replace(/\D/g,'')" v-model="formData.lifeRatio" controls-position="right" class="!w-300px" />
                            </el-form-item>
                        
                            <el-form-item label="其他损失与建筑物结构经济损失的系数" prop="otherRatio" label-width="300px">
                                <el-input maxlength="20"
                                :formatter="(value) => `${value}`.replace(/\D/g,'')"
                                :parser="(value) => value.replace(/\D/g,'')" v-model="formData.otherRatio" controls-position="right" class="!w-300px" />
                            </el-form-item>
                        </div>
                    </ContentWrapForm>
                </el-col>
                <el-col :span="24" class="flex" style="margin-bottom: 72px;" >
                    <ContentWrapForm  :title="'数值设置'"
                    :style-params="{
                        backgroundColor: '#fff!important',
                        padding:'20px',
                        borderRadius:'8px!important',
                        width: '100%'
                    }">
                        <el-col :span="24"></el-col>
                    <el-form-item>
                    </el-form-item>
                    <el-col :span="24">
                        <el-form-item label="建筑物造价数据" >
                            <UploadFile v-model="formData.vos" @uploadSuccess="uploadSuccess" @uploadError="uploadError" :limit=1 :updateUrl="updateUrl" :downloadFileUrl="downloadFileUrls">
                            </UploadFile>
                            <p style="position: absolute;
                                top: -15px;
                                left: 110px;">
                                <el-button type="primary" link
                                @click="handleDownload('2222222222222222222222222222222')">模板下载</el-button></p>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="建筑物损失比矩阵" :required='true' label-width="270px"></el-form-item>
                        <el-form-item label=" ">
                            <el-col :span="24">
                                <el-table class="listTables" ref="multipleTableRef" border :data="formData.list"
                                header-cell-class-name="list-header"
                                    style="width: 100%">
                                    <el-table-column prop="" label="破坏程度" align="right" width="160" style="position: relative;">
                                        <el-table-column prop="structureType" label="结构类型" width="160">
                                            <template #default="{ row }">
                                                <span>
                                                    {{ {1:'多层钢筋混凝土房屋',2:'多层砌体房屋',3:'单层民宅' ,4:'其他房屋'}[row.structureType] }}
                                                </span>
                                            </template>
                                        </el-table-column>
                                        <div class="iiioow"></div>
                                    </el-table-column>
                                    <el-table-column header-align="center" align="center" label="基本完好" >
                                        <template #default="{ row, $index }">
                                            <el-form-item :prop="`list.${$index}.basic`" :rules="formRules.basic">
                                                <el-input type="number" v-model="row.basic" placeholder="请输入" :min="0" maxlength="10" />
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column header-align="center" align="center" label="轻微破坏" >
                                        <template #default="{ row, $index }">
                                            <el-form-item :prop="`list.${$index}.slight`" :rules="formRules.slight">
                                                <el-input type="number" v-model="row.slight" placeholder="请输入" :min="0" maxlength="10" />
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column header-align="center" align="center" label="中等破坏" >
                                        <template #default="{ row, $index }">
                                            <el-form-item :prop="`list.${$index}.mid`" :rules="formRules.mid">
                                                <el-input type="number" v-model="row.mid" placeholder="请输入" :min="0" maxlength="10" />
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column header-align="center" align="center" label="严重破坏" >
                                        <template #default="{ row, $index }">
                                            <el-form-item :prop="`list.${$index}.serious`" :rules="formRules.serious">
                                                <el-input type="number" v-model="row.serious" placeholder="请输入" :min="0" maxlength="10" />
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column header-align="center" align="center" label="毁坏" >
                                        <template #default="{ row, $index }">
                                            <el-form-item :prop="`list.${$index}.destory`" :rules="formRules.destory">
                                                <el-input type="number" v-model="row.destory" placeholder="请输入" :min="0" maxlength="10" />
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-col>
                        </el-form-item>
                    </el-col>
                </ContentWrapForm>
                </el-col>
                
            </el-row> 
            <el-col :span="24" class="el-colfoot">
                    <el-button type="primary" @click="saveForm">保存</el-button>
                </el-col>
        </el-form>
        
</template>

<script setup>
import request from '@/config/axios'
import download from '@/utils/download'
import { getAccessToken } from '@/utils/auth'

import UploadFile from '@/views/responseLevel/populationDensity/create/UploadFileReport.vue'
import * as economicLossApi from '@/api/economicLoss'
const message = useMessage() // 消息弹窗
const updateUrl = ref(import.meta.env.VITE_BASES_URL + '/evaluate/attachment/uploadShpFile')
const downloadFileUrls=ref(import.meta.env.VITE_BASES_URL + '/evaluate/attachment/downLoadFile')
const uploadHeaders = ref({
  Authorization: 'Bearer ' + getAccessToken(),
})
defineOptions({ name: 'EconomicLoss' })
const formLoading = ref(false)
const formRef = ref()
const formData = ref({
    "adjustRatio": null, //调整系数
    "lifeRatio": null, //生命线与建筑物结构经济损失的系数
    "otherRatio": null, //其他损失与建筑物结构经济损失的系数
    "attachId": "",
    list: [
        {
        "structureType": "1", //建筑物结构类型 钢混1；多层砌体2；单层 3；其他4
        "basic": null, //基本完好
        "slight": null, //轻微破坏
        "mid": null, //中等破坏
        "serious": null, //严重破坏
        "destory": null //毁坏
        },
        {
        "structureType": "2", //建筑物结构类型 钢混1；多层砌体2；单层 3；其他4
        "basic": null, //基本完好
        "slight": null, //轻微破坏
        "mid": null, //中等破坏
        "serious": null, //严重破坏
        "destory": null //毁坏
        },
        {
        "structureType": "3", //建筑物结构类型 钢混1；多层砌体2；单层 3；其他4
        "basic": null, //基本完好
        "slight": null, //轻微破坏
        "mid": null, //中等破坏
        "serious": null, //严重破坏
        "destory": null //毁坏
        },
        {
        "structureType": "4", //建筑物结构类型 钢混1；多层砌体2；单层 3；其他4
        "basic": null, //基本完好
        "slight": null, //轻微破坏
        "mid": null, //中等破坏
        "serious": null, //严重破坏
        "destory": null //毁坏
        },
    ],
    vos: []
})

// 正整数校验
const positiveInteger = (rule, value, callback) => {
    if (value == null) {
        callback()
    } else if (isNaN(value)) {
        return callback(new Error());
    } else if (value.indexOf(".") != -1) {
        callback(new Error());
    } else {
        callback()
    }
}
const formRules = reactive({
    adjustRatio: [{ required: true, message: '调整系数不能为空', trigger: 'blur' },],
    lifeRatio: [{ required: true, message: '不能为空', trigger: 'blur' }, ],
    otherRatio: [{ required: true, message: '不能为空', trigger: 'blur' }, ],
    basic: [{ required: true, message: '损失占比不能为空', trigger: 'blur' }],
    slight: [{ required: true, message: '损失占比不能为空', trigger: 'blur' }],
    mid: [{ required: true, message: '损失占比不能为空', trigger: 'blur' }],
    serious: [{ required: true, message: '损失占比不能为空', trigger: 'blur' }],
    destory: [{ required: true, message: '损失占比不能为空', trigger: 'blur' }],
})
const uploadSuccess = (value) => {
    formData.value.attachId=value.fileList[0].attachId;
    formData.value.vos = value.fileList;
}
const uploadError = () => {
    formData.value.attachId='';
    formData.value.vos = [];
}
const saveForm = ()=>{
    const data = formData.value;
    data.adjustRatio=parseFloat(data.adjustRatio)
    data.lifeRatio=parseFloat(data.lifeRatio)
    data.otherRatio=parseFloat(data.otherRatio)
    data.list.forEach(item=>{
      item.basic=parseFloat(item.basic);
      item.slight=parseFloat(item.slight);
      item.mid=parseFloat(item.mid);
      item.serious=parseFloat(item.serious);
      item.destory=parseFloat(item.destory);
    })
    formRef.value.validate(async (valid) => {
        if (valid) {
             // 提交请求
      formLoading.value = true
      try {
        await economicLossApi.Update(data)
        message.success('修改成功')
        getDataList()
      } finally {
        formLoading.value = false
      }
        }
    })
}
const getDataList = async () => {
  const data = await economicLossApi.Details();
  if (data.vos && data.vos.length>0) {
    data.vos[0].name = data.vos[0].attachName;
    data.vos[0].url = data.vos[0].attachId;
  }else{
    data.vos=[]
  }
  formData.value = { ...data,list:data.list.length==0?formData.value.list:data.list };
}
// 下载文件
const handleDownload = async (attachId) => {
    if(!attachId)return 
    const res =await request.download({ url: `${downloadFileUrls.value }?attachId=${encodeURIComponent(attachId)}&token=${getAccessToken()}`,headers:uploadHeaders.value });
    download.zip(res, "建筑物造价数据模版.zip" )
}

getDataList()

</script>

<style lang="scss" scoped>
:deep(.el-table.listTables) {
    thead.is-group th {
        background: none;
    }

    thead.is-group tr:first-of-type th:first-of-type {
        border-bottom: none;
    }

    thead.is-group tr:first-of-type th:first-of-type:before {
        content: '';
        position: absolute;
        width: 1px;
        height: 88px;
        /*这里需要自己调整，根据td的宽度和高度*/
        top: 0;
        left: 0;
        background-color: grey;
        opacity: 0.3;
        display: block;
        transform: rotate(296deg);
        /*这里需要自己调整，根据线的位置*/
        transform-origin: top;
    }

    thead.is-group tr:last-of-type th:first-of-type:before {
        content: '';
        position: absolute;
        width: 1px;
        height: 88px;
        /*这里需要自己调整，根据td的宽度和高度*/
        bottom: 0;
        right: 0;
        background-color: grey;
        opacity: 0.3;
        display: block;
        transform: rotate(297deg);
        /*这里需要自己调整，根据线的位置*/
        transform-origin: bottom;
        /* background:red; */
    }
}
:deep(.list-header){
    background-color: #EAEFFE !important;
  /* 设置表头背景色 */
  color: #333 !important;
  /* 设置表头文字颜色 */
  font-weight: bold !important;
  /* 设置表头文字加粗 */
  height: 40px;
}
.flex{
    
  display: flex;
  align-items: center;
}
.iiioow{
    position: absolute;
    left: 1px;
    top: 1px;
    width: 198px;
    height: 40.5px;
    opacity: 1;
    border: 1px solid #E5E6EB;
  }
</style>